<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue@2.7.10.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .top {
            height: 50px;
            width: 100%;
            position: relative;
        }

        .top input {
            display: inline-block;
            width: 200px;
            height: 30px;
        }

        .top .addBtn {
            position: absolute;
            right: 10px;
            top: 10px;
        }

        /*表格背景色*/
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        /*服务对应员工的tags*/
        .el-tag + .el-tag {
            margin-left: 10px;
        }

        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div class="top">
            <el-input
                    @change="searchByValue"
                    v-model="search"
                    size="medium"
                    placeholder="输入关键字搜索">
            </el-input>

            <el-button type="success" class="addBtn" @click="beforeAdd">新增服务项目</el-button>

        </div>

        <el-table
                :data="tableData"
                :row-class-name="tableRowClassName"
                @expand-change="onExpand"
                border
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props" v-loading="expandLoading">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="服务项目描述">
                            <span>{{ props.row.description }}</span>
                        </el-form-item>
                    </el-form>

                    <el-tag
                            :key="tag"
                            v-for="tag in EmployeesTag[props.row.id]"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag,props.row.id)">
                        {{tag.employeeName}}
                    </el-tag>

                    <el-button
                            class="button-new-tag" size="small"
                            @click="showAddNewEmpForServiceDialog(props.row.id)">+ 新增员工
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="项目名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="duration"
                    label="服务时长(分钟)"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="createdAt"
                    label="创建日期"
                    width="'*'">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button @click="beforeEdit(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button @click="beforeDelete(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>

                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-dialog title="编辑" :visible.sync="editDialogVisible">
        <el-form :model="form">
            <el-form-item label="项目名称" label-width="120px">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" label-width="120px">
                <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="服务时长(分钟)" label-width="120px">
                <el-input v-model="form.duration" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="confirm">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="选择员工" :visible.sync="showAddNewEmpForService">
        <el-table
                height="400"
                ref="multipleTable"
                :data="EmployeeNotForService[EmployeeNotForServiceId]"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="position"
                    label="职位"
                    width="*">
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button type="success" @click="AddNewEmpForService">新增员工</el-button>
            <el-button type="info" @click="showAddNewEmpForService = false">取消选择</el-button>
        </div>
    </el-dialog>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        mounted() {
            this.init();

        },

        methods: {
            init() {
                axios.get('/service').then(res => {
                    if (res.data.code === 1) {
                        this.tableData = res.data.data;
                        this.tableData_copy = res.data.data;
                    }
                });
            },
            //表格内搜索
            searchByValue(value) {
                console.log(value)
                this.tableData = this.tableData_copy.filter(item => {
                    const searchString = this.search;
                    return !this.search
                        || item.name.toLowerCase().includes(searchString)
                        || item.description.toLowerCase().includes(searchString)
                });
            },
            //下面是增删改查
            beforeAdd() {
                this.form = {};
                this.editDialogVisible = true;
            },
            beforeEdit(row) {
                this.form = row;
                this.editDialogVisible = true;
            },
            confirm() {
                axios({
                    method: 'post',
                    url: '/service',
                    data: this.form
                }).then(res => {
                    if (res.data.code === 1) {
                        this.editDialogVisible = false;
                        this.form = {};
                        this.$message({
                            message: '数据插入成功',
                            type: 'success'
                        });
                    }
                })
                this.editDialogVisible = false;
            },
            beforeDelete(row) {
                this.$confirm('确认删除该服务信息？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteConfirm(row);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteConfirm(row) {
                this.deleteConfirmVisible = false;
                axios({
                    method: 'delete',
                    url: '/service',
                    data: row
                }).then(res => {
                    if (res.data.code === 1) {
                        this.$message({
                            message: '删除成功',
                            type: 'warning'
                        });
                    }
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 0) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 0) {
                    return 'success-row';
                } else {
                    return '';
                }
            },
            //expand事件 展开服务详细，显示该项服务的员工
            onExpand(row) {
                const serviceId = row.id;
                console.log(serviceId)
                this.expandLoading = true;
                //加载当前行服务项目对应的员工信息
                axios.get('/serviceAndEmployee/getByService', {params: {serviceId: serviceId}}).then(res => {
                    if (res.data.code === 1) {
                        this.EmployeesTag[serviceId] = res.data.data;
                        this.expandLoading = false;
                        this.EmployeesTag = [...this.EmployeesTag];
                    }
                })
            },
            // 点击标签的删除按钮
            handleClose(tag, serviceId) {
                const splice = this.EmployeesTag[serviceId].splice(this.EmployeesTag[serviceId].indexOf(tag), 1);
                axios.delete('/serviceAndEmployee', {data: splice[0]}).then(res => {
                    if (res.data.code === 1) {
                        this.$message({
                            message: '删除成功',
                            type: 'warning'
                        });
                    }
                })
            },
            // 打开给服务项目添加新员工对话框
            showAddNewEmpForServiceDialog(serviceId) {
                this.currentDialogSelectedData = [];

                axios.get('/serviceAndEmployee/getByServiceReverse', {params: {serviceId: serviceId}}).then(res => {
                    if (res.data.code === 1) {
                        this.EmployeeNotForService[serviceId] = res.data.data;
                        this.EmployeeNotForServiceId = serviceId;
                        this.showAddNewEmpForService = true;
                    }
                });
            },
            handleSelectionChange(val) {
                this.currentDialogSelectedData = val;
            },
            AddNewEmpForService() {
                if (this.currentDialogSelectedData.length === 0) {
                    this.$message({
                        message: '请选择员工',
                        type: 'warning'
                    });
                    return;
                }
                this.currentDialogSelectedData.forEach(item => {
                    axios.post('/serviceAndEmployee', {
                        serviceId: this.EmployeeNotForServiceId,
                        employeeId: item.id
                    })
                    this.EmployeesTag[this.EmployeeNotForServiceId] = [...this.EmployeesTag[this.EmployeeNotForServiceId], {
                        employeeId : item.id,
                        employeeName : item.name,
                        serviceId : this.EmployeeNotForServiceId
                    }];

                });
                this.showAddNewEmpForService = false;
                this.EmployeesTag = [...this.EmployeesTag];
            }

        },

        data: function () {
            return {
                // 表格相关
                search: '',
                tableData: [],
                tableData_copy: [],
                form: {},
                editDialogVisible: false,
                deleteConfirmVisible: false,
                // loading效果
                expandLoading: true,
                // 标签相关
                EmployeesTag: [],
                showAddNewEmpForService: false,
                EmployeeNotForServiceId: 0, //当前dialog是为哪个Service服务的
                EmployeeNotForService: [],
                currentDialogSelectedData: [], // 当前dialog选中的数据
            }
        }
    })
</script>
</html>